<template>
    <div class="dashboard-wrapper">
      <div class="stat-row">
        <StatCard label="今日销售" value="¥8,823" percent="+10%" />
        <StatCard label="总订单量" value="380" percent="+15%" />
        <StatCard label="产品销售量" value="999" percent="-5%" :up="false" />
        <StatCard label="新客户数" value="300" percent="+8%" />
      </div>
  
      <div class="panel-row">
        <div class="panel">
          <h3>收入趋势</h3>
          <LineChart />
        </div>
        <div class="panel">
          <h3>热门产品</h3>
          <TodoPanel :list="hotProducts" />
        </div>
      </div>
  
      <div class="stat-row bottom">
        <StatCard label="总收入" value="¥8,823" />
        <StatCard label="客户满意度" value="95%" />
        <StatCard label="目标销售额" value="¥12,122" />
        <StatCard label="实际销售额" value="¥8,823" />
      </div>
    </div>
  </template>
  
  <script setup>
  import StatCard  from '@/components/StatCard.vue'
  import LineChart from '@/components/LineChart.vue'
  import TodoPanel from '@/components/TodoPanel.vue'
  
  const hotProducts = [
    { name: '线上销售', percent: 75, desc: '75%', color: '#1890ff' },
    { name: '线下销售', percent: 25, desc: '25%', color: '#52c41a' }
  ]
  </script>